<template>
  <div id="app">
    <back class="back"></back>
    <el-amap vid="amap" 
      class="amap-demo" 
      :zoom="zoom"
      :center="center"
      :plugin="plugin">
      <div>
        <el-amap-marker 
          v-for="(marker, index) in markers" 
          :key="index"
          :position="marker.position" 
          :events="marker.events" 
          :visible="marker.visible"
          :vid="index"
          >
        </el-amap-marker>
      </div>
      <div>
        <el-amap-text
          v-for="(text, index) in markers"
          :key="index" 
          :text="text.text"
          :offset="text.offset"
          :position="text.position">
        </el-amap-text>
      </div>
      <div>
        <el-amap-polygon 
          v-for="(polygon, index) in polygons"
          :key="index"
          :vid="index" 
          :fillOpacity="polygon.fillOpacity"
          :path="polygon.path" 
          :fillColor="polygon.fillColor"
          :strokeColor="polygon.strokeColor"
          :events="polygon.events">
        </el-amap-polygon>
      </div>
    </el-amap>
  </div>
</template>

<script>
import back from './back.vue'
export default {
  data() {
    return {
      center: [106.59633, 29.49539],
      lng: 0,
      lat: 0,
      zoom: 16,
      loaded: false,
      plugin: [{
        pName: 'MapType',
        defaultType: 1
        }],
      markers: [{
        position: [106.5961134, 29.497447],
        text: "星涟海",
        offset: [50, -15],
        visible: true,
        }, {
          position: [106.596734, 29.493947],
          text: "云浮城",
          offset: [50, -15],
          visible: true,
      }],
      polygons: [
        {
          fillOpacity: "0.7",
          strokeColor: "#ffffff",
          fillColor: "#d0e9a9",
          path: [[106.596133, 29.498058], [106.59506, 29.497927], [106.594932, 29.497012], [106.596026, 29.496395], [106.596906, 29.496414], [106.59712, 29.497665]],
          events: {
            click: () => {
              this.$router.push({path: '/panorama', query: {link: '/1.jpg'}})
            }
          }
        }, {
          fillOpacity: "0.7",
          strokeColor: "#ffffff",
          fillColor: "#d0e9a9",
          path: [[106.596391, 29.494901], [106.59594, 29.494285], [106.596326, 29.493501], [106.597292, 29.493575], [106.597506, 29.494248], [106.597163, 29.49492]],
          events: {
            click: () => {
              this.$router.push({path: '/panorama', query: {link: '/2.jpg'}})
            }
          }
        }
      ]
    }
  },
  components: {
    back
  }
}
</script>

<style>

  #app {
    width: 100%;
    height: 100vh;

  }

  .amap-demo {
    height: 300px;
    width: 100%;
  }
</style>